<template>
  <div>
    <!-- 头部 -->
    <div class="plantion">
      <span>
        时间段：
        <el-select v-model="period" placeholder="全部" style="width: 220px" @change="periodChange">
          <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </span>
      &#12288;
      <span>
        职能组:
        <el-select v-model="fid" @change="fidChange">
          <el-option v-for="item in groupsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </span>
      &#12288;
      <!-- <el-button type="primary" @click="selectWork()">查询</el-button> -->
      <el-button type="primary" @click="addPlan()">新增计划</el-button>
      <div class="plantion_noWork" v-if="userInfo.isLeader == 1" @click="workConfirmed()">
        待确认计划>>>
      </div>
    </div>
    <br />

    <!-- 工作列表 -->
    <div style="margin-bottom: 35px" v-for="item in this.planPersonal">
      <div class="taskTile">
        <div class="class_taskTile_left">
          <!-- <i class="el-icon-user-solid" v-show="userInfo.isLeader == 1"></i> -->
          <h3>{{ item.userName }}</h3>
          <span>{{ item.groupName }}</span>
        </div>
        <div style="color: #00b98d; cursor: pointer" @click="dataliClick(item.userId, item.userName, item.groupName)">
          查看全部计划>
        </div>
      </div>
      <div class="tableData">
        <el-table :data="item.planRespList" border style="width: 100%">
          <el-table-column type="index" label="序号" width="100" align="left" fixed="left">
          </el-table-column>
          <!-- <el-table-column prop="functionGroupName" label="职能组" width="150" align="left">
          </el-table-column> -->
          <el-table-column prop="weekPartStr" label="计划日期" width="200" align="left">
          </el-table-column>
          <el-table-column prop="projectName" label="项目名称" width="150" align="left">
          </el-table-column>
          <el-table-column prop="pushTime" label="录入时间" width="150" align="left">
          </el-table-column>
          <el-table-column prop="weekPlanMsg" label="工作内容" width="500" align="left">
          </el-table-column>
          <el-table-column prop="reviewState" label="状态" width="100" align="left">
            <span slot-scope="scope">{{
                scope.row.reviewState == 0 ? "未确认" : "已确认"
            }}</span>
          </el-table-column>
          <el-table-column prop="reviewName" label="确认人" width="100" align="left">
          </el-table-column>
          <el-table-column prop="operation" label="操作" width="250" align="left" fixed="right">
            <template slot-scope="scope">
              <el-button v-show="
                scope.row.reviewState == 0 &&
                userInfo.name == scope.row.submitterName
              " type="primary" plain size="mini" @click="updateEmpPlan(scope.row)">修 改</el-button>
              <el-button v-show="
                scope.row.reviewState == 0 &&
                userInfo.name == scope.row.submitterName
              " type="danger" plain size="mini" @click="deleteEmpPlan(scope.row)">删 除</el-button>
              <el-button v-show="
                userInfo.isLeader == 1 &&
                userInfo.fid == scope.row.fid &&
                userInfo.crossGroupReview == 0
              " type="success" plain size="mini" @click="queren(scope.row)">
                {{ scope.row.reviewState == 0 ? "确认" : "取消确认" }}
              </el-button>
              <el-button v-show="
                userInfo.isLeader == 1 && userInfo.crossGroupReview == 1
              " type="success" plain size="mini" @click="queren(scope.row)">
                {{ scope.row.reviewState == 0 ? "确认" : "取消确认" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog :title="title" :visible.sync="dialogAddPlan" center width="40%" @close="cancel()" :close-on-click-modal="false">
      <el-form :model="form" ref="workPlanRef" :rules="workPlan">
        <div v-if="this.category == 'add'">
          <el-form-item label="计划日期:" :label-width="formLabelWidth" prop="weekPartStr" :rules="{
            required: true,
            message: '计划时间不能为空',
            trigger: 'blur',
          }">
            <el-select v-model="form.weekPartStr" placeholder="请选择" style="width: 70%">
              <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-for="(item, i) of form.projectPlanMsgs" :key="i">
            <el-form-item label="项目名称:" :label-width="formLabelWidth" :prop="`projectPlanMsgs[${i}].projectId`" :rules="{
              required: true,
              message: '请选择项目',
              trigger: 'blur',
            }">
              <el-select v-model="item.projectId" clearable @change="projectGroup" placeholder="请选择项目"
                style="width: 70%">
                <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <p></p>
            <el-form-item label="公司计划:" :label-width="formLabelWidth" v-if="item.plan">
              <el-card class="box-card" style="width: 70%">
                {{ item.plan }}
              </el-card>
            </el-form-item>
            <p></p>
            <el-form-item label="工作内容:" :label-width="formLabelWidth" :prop="'projectPlanMsgs.' + i + '.planMsg'"
              :rules="{
                required: true,
                message: '工作内容不能为空',
                trigger: 'blur',
              }">
              <el-input placeholder="请输入工作内容" type="textarea" v-model="item.planMsg" style="width: 70%"></el-input>
              <el-button icon="el-icon-minus" circle @click="dele(item)"></el-button>
            </el-form-item>
          </el-form-item>
        </div>
        <div v-if="this.category == 'update'">
          <el-form-item label="计划日期:" :label-width="formLabelWidth">
            <el-select v-model="weekPartStrUpdate" placeholder="请选择" @change="Week" style="width: 70%">
              <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称:" :label-width="formLabelWidth">
            <el-select v-model="form.projectId" clearable @change="projectGroup" placeholder="请选择项目" style="width: 70%">
              <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司计划:" :label-width="formLabelWidth" v-if="plan">
            <el-card class="box-card" style="width: 70%">
              {{ plan }}
            </el-card>
          </el-form-item>
          <!-- <p></p> -->
          <el-form-item label="工作内容:" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="planMsg" style="width: 70%"></el-input>
          </el-form-item>
        </div>

        <div class="btn-input-emp" v-if="this.category == 'add'">
          <el-button icon="el-icon-plus" circle @click="add()"></el-button>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitPlan('workPlanRef')" v-show="this.category == 'add'">确 定</el-button>
        <el-button type="primary" @click="updatePlan" v-show="this.category == 'update'">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  companyPlan,
  selectFunctionGroupList,
  userProgressProjects,
  addEmpPlan,
  empPlanReview,
  empPlanUpdate,
  empPlanDelete,
  empPlanPersonal,
  getCompanyPlanById,
} from "@/service/Api.js"; //接口
export default {
  data() {
    return {
      planPersonal: [],
      title: "",
      category: "",
      tableData: [],
      reviewName: "",
      dialogAddPlan: false,
      form: {
        weekPartStr: "",
        projectPlanMsgs: [
          {
            projectId: "",
            plan: "",
            planMsg: "",
          },
        ],
      },
      period: "",
      fid: "",
      groupName: "",
      id: "", //计划id
      groupsList: [],
      projectList: [
        {
          id: "",
          name: "",
        },
      ],
      projectPlanMsgs: [
        {
          projectId: "",
          planMsg: "",
        },
      ],
      projectId: "",
      weekPartStr: "",
      projectName: "",
      planMsg: "",
      weekPartStrUpdate: "",
      options: [],
      formLabelWidth: "150px",
      status: "",
      pageObj: {
        size: 10,
        total: 0,
        height: "75vh",
        currentPage: 1,
        func: (currentPage) => {
          this.pageTurning(currentPage);
        },
      },
      pn: 1,
      ps: 10,
      isLeader: "",
      userInfo: {},
      workPlan: {},
      plan: "",
    };
  },
  // watch() {
  //   close()
  // },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.fid = this.userInfo.fid;
    this.weekDate();
    this.groups();
    // this.dataList();
  },

  methods: {
    //获取工作管理时间段
    weekDate() {
      if (this.type == 1) {
        companyPlan(1).then((res) => {
          if (res.code == 0) {
            this.options = res.data;
            this.form.weekPartStr = res.data[0];
            this.weekPartStrUpdate = res.data[0];
          }
        });
      } else if (this.type == 0) {
        companyPlan(0).then((res) => {
          if (res.code == 0) {
            this.options = res.data;
          }
        });
      } else {
        companyPlan(0).then((res) => {
          if (res.code == 0) {
            this.options = res.data;
            if (this.period == "") {
              this.period = res.data[3];
            }
            this.options.unshift("全部");
            this.dataList();
          }
        });
      }
    },

    //查询
    selectWork() {
      this.type = -1;
      this.weekDate();
    },

    fidChange() {
      this.selectWork();
    },
    periodChange() {
      this.selectWork();
    },

    //分页查询员工周计划列表
    dataList() {
      // debugger
      if (this.period == "全部" && this.fid == "") {
        let data = {
          planDateStr: "",
          fids: 0,
        };
        empPlanPersonal(data).then((res) => {
          if (res.code == 0) {
            this.planPersonal = res.data;
            this.groupName = res.data.groupName;
          }
        });
      } else if (this.period == "全部" && this.fid) {
        let data = {
          planDateStr: "",
          fids: this.fid,
        };
        empPlanPersonal(data).then((res) => {
          if (res.code == 0) {
            this.planPersonal = res.data;
            this.groupName = res.data.groupName;
          }
        });
      } else if (this.fid == "") {
        let data = {
          planDateStr: this.period,
          fids: 0,
        };
        empPlanPersonal(data).then((res) => {
          if (res.code == 0) {
            this.planPersonal = res.data;
            this.groupName = res.data.groupName;
          }
        });
      } else if (this.fid == "" && this.period) {
        let data = {
          planDateStr: this.period,
          fids: 0,
        };
        empPlanPersonal(data).then((res) => {
          if (res.code == 0) {
            this.planPersonal = res.data;
            this.groupName = res.data.groupName;
          }
        });
      } else if (this.fid || this.period) {
        let data = {
          planDateStr: this.period,
          fids: this.fid,
        };
        empPlanPersonal(data).then((res) => {
          if (res.code == 0) {
            this.planPersonal = res.data;
            this.groupName = res.data.groupName;
          }
        });
      }
    },
    //   翻页
    pageTurning(currentPage) {
      this.pageObj.currentPage = currentPage;
      this.pn = currentPage;
      this.dataList();
    },
    handleSizeChange(val) {
      this.ps = val;
      this.dataList();
    },

    //获取职能组列表
    groups() {
      let userInfo = sessionStorage.getItem("userInfo");
      let id = JSON.parse(userInfo).id;
      selectFunctionGroupList(id).then((res) => {
        if (res.code == 0) {
          this.groupsList = res.data;
          let f;
          let arr = [];
          res.data.forEach(item => {
            arr.push(item.id);
            f = arr.join(",")
          })
          let list = [
            {
              id: f,
              name: "所有职能组",
            },
          ];
          list.push(...res.data);
          this.groupsList = list;
          this.groupsList.forEach((item) => {
            if (item.id == this.fid) {
              this.groupName = item.name;
            }
          });
          if (res.data.length > 0) {
            let userInfo = sessionStorage.getItem("userInfo");
            if (JSON.parse(userInfo).fid == 0) {
              this.fid = f;
            } else {
              this.fid = JSON.parse(userInfo).fid;
            }
            this.islead = JSON.parse(userInfo).isLeader;
          }
        }
      });
    },
    //打开新增计划对话框
    addPlan() {
      this.category = "add";
      this.title = "新增计划";
      this.type = 1;
      this.weekDate();
      userProgressProjects().then((res) => {
        if (res.code == 0) {
          this.projectList = res.data;
          if (res.data > 0) {
            this.projectId = res.data[0].id;
            this.projectName = res.data[0].name;
          } else {
            this.projectId = "";
          }
        }
      });
      this.dialogAddPlan = true;
    },

    projectGroup(val) {
      if (!val) {
        return;
      } else {
        let pro = {};
        pro = this.projectList.find((item) => {
          return item.id === val;
        });
      }
      let data = {
        planDateStr: this.form.weekPartStr,
        projectId: val
      }
      getCompanyPlanById(data).then(res => {
        if (res.code == 0) {
          if (this.category == "add") {
            this.form.projectPlanMsgs.forEach((item, i) => {
              if (item.projectId == val) {
                this.$set(item, 'plan', res.data.planMsg)
              }
            })
          } else {
            this.plan = res.data.planMsg
          }
        }
      })
    },
    Week(val) {
      let pro = {};
      pro = this.options.find((item) => {
        return item === val;
      });
    },

    //清空
    clear() {
      //this.form = {};
      this.form.projectPlanMsgs = [{ projectId: "", planMsg: "" }];
      this.$nextTick(() => {
        this.$refs.workPlanRef.clearValidate();
      });
    },

    cancel() {
      this.clear();
      this.selectWork();
      this.dialogAddPlan = false;
    },

    //新增计划
    submitPlan(workPlanRef) {
      this.$refs[workPlanRef].validate((valid) => {
        if (valid) {
          let data = {
            weekPartStr: this.form.weekPartStr,
            projectPlanMsgs: this.form.projectPlanMsgs,
          };
          addEmpPlan(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: res.message,
                type: "success",
              });
              this.clear();
              this.selectWork();
              this.dialogAddPlan = false;
            } else {
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
          });
        }
      });
    },
    //修改员工计划
    updateEmpPlan(row) {
      this.category = "update";
      this.title = "修改计划";
      this.type = 0;
      this.weekDate();
      this.form = row;
      this.weekPartStrUpdate = row.weekPartStr;
      this.planMsg = row.weekPlanMsg;
      userProgressProjects().then((res) => {
        if (res.code == 0) {
          this.projectList = res.data;
        }
      });
      this.projectGroup(row.projectId)
      this.id = row.id;
      this.dialogAddPlan = true;
    },
    updatePlan() {
      if (this.planMsg == "" && this.form.projectId == "") {
        this.$message({
          message: "工作内容和项目名称不能为空",
          type: "warning",
        });
      } else if (this.planMsg == "") {
        this.$message({
          message: "工作内容不能为空",
          type: "warning",
        });
      } else if (this.form.projectId == "") {
        this.$message({
          message: "项目名称不能为空",
          type: "warning",
        });
      } else {
        let data = {
          id: this.id,
          weekPartStr: this.weekPartStrUpdate,
          projectId: this.form.projectId,
          weekPlanMsg: this.planMsg,
        };
        empPlanUpdate(data).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: res.message,
              type: "success",
            });
          }
          this.selectWork();
          this.dialogAddPlan = false;
        });
      }
    },

    //删除计划
    deleteEmpPlan(row) {
      this.$confirm("确认删除此计划吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.id = row.id;
          empPlanDelete(this.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
          this.selectWork();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //确认计划
    queren(row) {
      if (row.reviewState == 0) {
        let data = {
          id: row.id,
          state: 1,
        };
        empPlanReview(data).then((res) => {
          if ((res.code = 0)) {
            this.$message({
              message: "已确认",
              type: "success",
            });
          }
          this.dataList();
        });
      } else {
        let data = {
          id: row.id,
          state: 0,
        };
        empPlanReview(data).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "已取消确认",
              type: "success",
            });
          }
          this.dataList();
        });
        this.reviewName = "";
      }
    },

    add() {
      this.form.projectPlanMsgs.push(
        //增加就push进数组一个新值
        {
          projectId: "",
          planMsg: "",
        }
      );
    },

    dele(item) {
      if (this.form.projectPlanMsgs.length === 1) {
        this.$message({
          message: "至少一条计划",
          type: "warning",
        });
      } else {
        var index = this.form.projectPlanMsgs.indexOf(item);
        if (index !== -1) {
          this.form.projectPlanMsgs.splice(index, 1);
        }
      }

      // var index = this.form.projectPlanMsgs.indexOf(i);
      // if (index !== -1) {
      //   this.form.projectPlanMsgs.splice(index, 1);
      // }
    },

    dataliClick(uid, userName, groupName) {
      this.$router.push({
        path: "/workLog",
        query: {
          type: 1,
          uid: uid,
          name: userName,
          groupName: groupName,
        },
      });
    },

    workConfirmed() {
      this.$router.push({
        path: "/workLog",
        query: {
          type: 2,
          name: this.userInfo.name,
          groupName: this.groupName,
          fidId: this.userInfo.fid
        },
      });
    },
  },
};
</script>

<style>
.condition {
  display: flex;
  justify-content: space-between;
}

.btn-input-emp {
  line-height: 60px;
  text-align: center;
}

.el-form-item__error {
  margin-bottom: 8px;
  position: inherit;
}

.taskTile {
  display: flex;
  align-items: center;
  margin: 10px 20px 0 20px;
  padding: 0 10px;
  border: 1px solid #e8eef5;
  background: #f9f9f9;
  border-bottom: 0px;
  height: 50px;
  justify-content: space-between;
}

.class_taskTile_left {
  display: flex;
  align-content: center;
  justify-content: flex-start;
}

.taskTile i {
  font-size: 22px;
  color: #34b79a;
}

.taskTile h3 {
  margin-right: 25px !important;
}

.tableData {
  margin-left: 20px;
  margin-right: 20px;
}

.plantion_noWork {
  color: #e40712;
  cursor: pointer;
  padding-top: 15px;
  margin-left: 20px;
}
</style>                                              